/********************************
指标考核流程信息
* */
<template>
  <div>
    <el-dialog :visible.sync="showPicDialog" title="流程图" width="100%" fullscreen>
      <div>
        <el-row style="display: flex;justify-content: space-between;">
          <el-col :span="13" class="liucheng">
            <div class="bg_tiao" v-if="tableList.length>0"></div>
            <div
              style="display:flex; justify-content:space-between ;width:100%;z-index: 8; position: sticky;"
              v-if="tableList.length>0"
            >
              <div class="text_dh">
                <div style="color:#0762c3;margin:0 45px">开始</div>
                <div v-if="type == '开始'" class="redpoint">
                  <i class="el-icon-s-flag active_guang"></i>
                </div>
                <img v-else class="imgs" src="./start.png" alt />
              </div>
              <div class="text_dh">
                <div style="color:#0762c3;margin:0 27px">日常考核员创建</div>
                <div v-if="type == '日常考核员创建'" class="redpoint">
                  <i class="el-icon-s-flag active_guang"></i>
                </div>
                <div v-else-if="failed1 == true" class="failed">
                  <i class="el-icon-star-on checkedfailed"></i>
                </div>
                <div v-else class="chenck_active">
                  <i class="el-icon-star-on checked2"></i>
                </div>
              </div>
              <div class="text_dh">
                <div style="color:#0762c3;margin:0 27px">指标拟定</div>
                <div v-if="type == '指标拟定'" class="redpoint">
                  <i class="el-icon-s-flag active_guang"></i>
                </div>
                <div v-else-if="failed2 == true" class="failed">
                  <i class="el-icon-star-on checkedfailed"></i>
                </div>
                <div v-else class="chenck_active">
                  <i class="el-icon-star-on checked2"></i>
                </div>
              </div>
              <div class="text_dh">
                <div style="color:#0762c3;margin:0 45px">指标审核</div>
                <div v-if="type == '指标审核'" class="redpoint">
                  <i class="el-icon-s-flag active_guang"></i>
                </div>
                <div v-else-if="failed3 == true" class="failed">
                  <i class="el-icon-star-on checkedfailed"></i>
                </div>
                <div v-else class="chenck_active">
                  <i class="el-icon-star-on checked2"></i>
                </div>
              </div>
              <div class="text_dh">
                <div style="color:#0762c3;margin:0 9px">委员会专员审核</div>
                <div v-if="type == '委员会专员审核'" class="redpoint">
                  <i class="el-icon-s-flag active_guang"></i>
                </div>
                <div v-else-if="failed4 == true" class="failed">
                  <i class="el-icon-star-on checkedfailed"></i>
                </div>
                <div v-else class="chenck_active">
                  <i class="el-icon-star-on checked2"></i>
                </div>
              </div>
              <div class="text_dh">
                <div style="color:#0762c3;">委员会审定</div>
                <div v-if="type == '委员会审定'" class="redpoint">
                  <i class="el-icon-s-flag active_guang"></i>
                </div>
                <div v-else-if="failed5 == true" class="failed">
                  <i class="el-icon-star-on checkedfailed"></i>
                </div>
                <div v-else class="chenck_active">
                  <i class="el-icon-star-on checked2"></i>
                </div>
              </div>
            </div>

            <div class="bg_tiao2" v-if="tableList.length > 0"></div>
            <div style="display:flex; justify-content:space-between ;width:100%;z-index: 8; position: sticky;margin-top:20px" v-if="tableList.length>0">
              <div class="text_dh">
                <div style="color:#0762c3;margin:0 27px;">发起填报</div>
                <div v-if="type == '发起填报'" class="redpoint"><i class="el-icon-s-flag active_guang"></i></div>
                <div v-else-if="failed6 == true" class="failed"><i class="el-icon-star-on checkedfailed"></i></div>
                <div v-else class="chenck_active"><i class="el-icon-star-on checked2"></i></div>
              </div>
              <div class="text_dh">
                <div style="color:#0762c3;margin:0 27px">结果填报</div>
                <div v-if="type == '结果填报'" class="redpoint"><i class="el-icon-s-flag active_guang"></i></div>
                <div v-else-if="failed7 == true" class="failed"><i class="el-icon-star-on checkedfailed"></i></div>
                <div v-else class="chenck_active"><i class="el-icon-star-on checked2"></i></div>
              </div>
              <div class="text_dh">
                <div style="color:#0762c3;margin:0 27px">结果审核</div>
                <div v-if="type == '结果审核'" class="redpoint"><i class="el-icon-s-flag active_guang"></i></div>
                <div v-else-if="failed8 == true" class="failed"><i class="el-icon-star-on checkedfailed"></i></div>
                <div v-else class="chenck_active"><i class="el-icon-star-on checked2"></i></div>
              </div>
              <div class="text_dh">
                <div style="color:#0762c3;margin:0 27px">专员汇总</div>
                <div v-if="type == '专员汇总'" class="redpoint"><i class="el-icon-s-flag active_guang"></i></div>
                <div v-else-if="failed9 == true" class="failed"><i class="el-icon-star-on checkedfailed"></i></div>
                <div v-else class="chenck_active"><i class="el-icon-star-on checked2"></i></div>
              </div>
              <div class="text_dh">
                <div style="color:#0762c3;margin:0 9px">领导审核</div>
                <div v-if="type == '领导审核'" class="redpoint"><i class="el-icon-s-flag active_guang"></i></div>
                <div v-else-if="failed10 == true" class="failed"><i class="el-icon-star-on checkedfailed"></i></div>
                <div v-else class="chenck_active"><i class="el-icon-star-on checked2"></i></div>
              </div>
              <div class="text_dh">
                <div style="color:#0762c3;margin:0 9px">被考核人确认</div>
                <div v-if="type == '被考核人确认'" class="redpoint"><i class="el-icon-s-flag active_guang"></i></div>
                <div v-else-if="failed11 == true" class="failed"><i class="el-icon-star-on checkedfailed"></i></div>
                <div v-else class="chenck_active"><i class="el-icon-star-on checked2"></i></div>
              </div>
              <div class="text_dh">
                <div style="color:#0762c3;margin:0 45px;">结束</div>
                <div v-if="type == 'end'" class="redpoint"><i class="el-icon-s-flag active_guang"></i></div>
                <img v-else-if="failed13 == true" class="imgs" src="./end2.png" alt="">
                <img v-else class="imgs" src="./end.png" alt="">
              </div>
            </div>


          </el-col>
          <el-col :span="10">
            <el-table :data="tableList" border style="width: 100%">
              <el-table-column
                prop="taskId"
                label="任务ID"
                width="80"
                header-align="center"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="processInstanceId"
                label="实例ID"
                header-align="center"
                align="center"
                width="90"
              ></el-table-column>
              <el-table-column
                prop="taskName"
                width="200"
                label="任务名称"
                header-align="center"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="assignee"
                width="180"
                label="处理人"
                header-align="center"
                align="center"
              >
                <template slot-scope="scope">
                  <span
                    v-if="
                      scope.row.taskName == '部门绩效考核联络员任务填报' &&
                      scope.row.flag
                    "
                  >
                    {{ scope.row.assignee
                    }}
                    <i
                      style="margin-left: 5px; color: #1a71fb; cursor: pointer"
                      @click="showUserNd(scope.row)"
                      class="el-icon-edit-outline"
                    ></i>
                  </span>
                  <span v-else-if="scope.row.flag">
                    {{ scope.row.assignee }}
                    <i
                      style="margin-left: 5px; color: #1a71fb; cursor: pointer"
                      @click="showUser(scope.row.taskId)"
                      class="el-icon-edit-outline"
                    ></i>
                  </span>
                  <span v-else>{{ scope.row.assignee }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="start" label="开始时间" header-align="center" align="center">
                <template slot-scope="scope">
                  <span v-if="scope.row.start">
                    {{
                    scope.row.start.substr(0, 10)
                    }}
                  </span>
                </template>
              </el-table-column>
              <el-table-column prop="end" label="结束时间" header-align="center" align="center">
                <template slot-scope="scope">
                  <span v-if="scope.row.end">
                    {{
                    scope.row.end.substr(0, 10)
                    }}
                  </span>
                </template>
              </el-table-column>
            </el-table>
          </el-col>
        </el-row>
      </div>
      <el-dialog width="30%" title="请选择" :visible.sync="innerVisible" append-to-body>
        <el-table :data="chooseList" style="width: 100%" @row-click="rowChooseBtn">
          <el-table-column prop="bmName" label="部门" header-align="center" align="center"></el-table-column>
          <el-table-column prop="userName" label="姓名" header-align="center" align="center"></el-table-column>
        </el-table>
      </el-dialog>
      <UserCommonSelectTask v-if="usercommentTask" ref="userTask" @submitfy="submitfyTask"></UserCommonSelectTask>
    </el-dialog>
  </div>
</template>
<script>
import { showMessage } from "@/api/activiti/task";
import { getSjNodeInfo } from "@/api/dailyExamine/eventExamine/sjtemplate";
import { getLlrList } from "@/api/hetongrenwu/zhongdian/renwuchuangjian";
import { changeAss } from "@/api/dailyExamine/eventExamine/sjtemplate";
import UserCommonSelectTask from "./usercomment-select";
export default {
  data() {
    return {
      tableList: [],
      showPicDialog: false,
      chooseList: [],
      innerVisible: false,
      proId: "",
      taskId: "",
      usercommentTask: false,
      type: "",
      failed1: false,
      failed2: false,
      failed3: false,
      failed4: false,
      failed5: false,
        failed6: false,
        failed7: false,
        failed8: false,
        failed9: false,
        failed10: false,
        failed11: false,
      failed13: false
    };
  },
  components: {
    UserCommonSelectTask
  },
  methods: {
    init(proId) {
      this.type == "",
        this.tableList == [],
        (this.proId = ""),
        (this.proId = proId);
      this.fnlist();
        getSjNodeInfo(proId).then(res => {
        this.type = res.data.msg;
        if (res.data.msg == "日常考核员创建") {
          this.failed1 = false;
          this.failed2 = true;
          this.failed3 = true;
          this.failed4 = true;
          this.failed5 = true;
            this.failed6 = true;
            this.failed7 = true;
            this.failed8 = true;
            this.failed9 = true;
            this.failed10 = true;
            this.failed11 = true;
          this.failed13 = true;
        } else if (res.data.msg == "指标拟定") {
          this.failed1 = false;
          this.failed2 = false;
          this.failed3 = true;
          this.failed4 = true;
          this.failed5 = true;
            this.failed6 = true;
            this.failed7 = true;
            this.failed8 = true;
            this.failed9 = true;
            this.failed10 = true;
            this.failed11 = true;
          this.failed13 = true;
        } else if (res.data.msg == "指标审核") {
          this.failed1 = false;
          this.failed2 = false;
          this.failed3 = false;
          this.failed4 = true;
          this.failed5 = true;
            this.failed6 = true;
            this.failed7 = true;
            this.failed8 = true;
            this.failed9 = true;
            this.failed10 = true;
            this.failed11 = true;
          this.failed13 = true;
        } else if (res.data.msg == "委员会专员审核") {
          this.failed1 = false;
          this.failed2 = false;
          this.failed3 = false;
          this.failed4 = false;
          this.failed5 = true;
            this.failed6 = true;
            this.failed7 = true;
            this.failed8 = true;
            this.failed9 = true;
            this.failed10 = true;
            this.failed11 = true;
          this.failed13 = true;
        } else if (res.data.msg == "委员会审定") {
          this.failed1 = false;
          this.failed2 = false;
          this.failed3 = false;
          this.failed4 = false;
          this.failed5 = false;
            this.failed6 = true;
            this.failed7 = true;
            this.failed8 = true;
            this.failed9 = true;
            this.failed10 = true;
            this.failed11 = true;
          this.failed13 = true;
        }
        else if (res.data.msg == "发起填报") {
                this.failed1 = false;
                this.failed2 = false;
                this.failed3 = false;
                this.failed4 = false;
                this.failed5 = false;
                this.failed6 = false;
                this.failed7 = true;
                this.failed8 = true;
                this.failed9 = true;
                this.failed10 = true;
                this.failed11 = true;
                this.failed13 = true;
            }
        else if (res.data.msg == "结果填报") {
            this.failed1 = false;
            this.failed2 = false;
            this.failed3 = false;
            this.failed4 = false;
            this.failed5 = false;
            this.failed6 = false;
            this.failed7 = false;
            this.failed8 = true;
            this.failed9 = true;
            this.failed10 = true;
            this.failed11 = true;
            this.failed13 = true;
        }
        else if (res.data.msg == "结果审核") {
            this.failed1 = false;
            this.failed2 = false;
            this.failed3 = false;
            this.failed4 = false;
            this.failed5 = false;
            this.failed6 = false;
            this.failed7 = false;
            this.failed8 = false;
            this.failed9 = true;
            this.failed10 = true;
            this.failed11 = true;
            this.failed13 = true;
        }
        else if (res.data.msg == "专员汇总") {
            this.failed1 = false;
            this.failed2 = false;
            this.failed3 = false;
            this.failed4 = false;
            this.failed5 = false;
            this.failed6 = false;
            this.failed7 = false;
            this.failed8 = false;
            this.failed9 = false;
            this.failed10 = true;
            this.failed11 = true;
            this.failed13 = true;
        }
        else if (res.data.msg == "领导审核") {
            this.failed1 = false;
            this.failed2 = false;
            this.failed3 = false;
            this.failed4 = false;
            this.failed5 = false;
            this.failed6 = false;
            this.failed7 = false;
            this.failed8 = false;
            this.failed9 = false;
            this.failed10 = false;
            this.failed11 = true;
            this.failed13 = true;
        }
        else if (res.data.msg == "被考核人确认") {
            this.failed1 = false;
            this.failed2 = false;
            this.failed3 = false;
            this.failed4 = false;
            this.failed5 = false;
            this.failed6 = false;
            this.failed7 = false;
            this.failed8 = false;
            this.failed9 = false;
            this.failed10 = false;
            this.failed11 = false;
            this.failed13 = true;
        }
        else if (res.data.msg == "end") {
            this.failed1 = false;
            this.failed2 = false;
            this.failed3 = false;
            this.failed4 = false;
            this.failed5 = false;
            this.failed6 = false;
            this.failed7 = false;
            this.failed8 = false;
            this.failed9 = false;
            this.failed10 = false;
            this.failed11 = false;
            this.failed13 = false;
        }
      });
    },
    fnlist() {
      showMessage(this.proId).then(res => {
        this.tableList = res.data.data;
        this.showPicDialog = true;
      });
    },
    showUserNd(row) {
      var params = {
        deptId: row.deptId
      };
      getLlrList(params).then(res => {
        this.chooseList = res.data.data;
        this.chooseList.forEach(ele => {
          ele.taskId = row.taskId;
        });
        this.innerVisible = true;
      });
    },
    rowChooseBtn(row) {
      changeAss({
        taskId: row.taskId,
        userId: row.userId
      }).then(res => {
        this.$message.success("审批人更换成功");
        this.innerVisible = false;
        this.fnlist();
        this.$emit("processTrackingChildren", "返回");
      });
    },
    showUser(taskId) {
      this.taskId = taskId;
      this.usercommentTask = true;
      this.$nextTick(() => {
        this.$refs.userTask.init("", "zxshr", JSON.stringify([]), "htcj");
      });
    },
    submitfyTask(data) {
      if (data.tableDataUser.length != 1) {
        this.$message.closeAll();
        this.$message.error("请指定唯一的审批人");
      } else {
        changeAss({
          taskId: this.taskId,
          userId: data.tableDataUser[0].userId
        }).then(res => {
          this.$message.closeAll();
          this.$message.success("审批人更换成功");
          this.fnlist();
          this.$emit("processTrackingChildren", "返回");
        });
      }
    }
  }
};
</script>
<style lang="scss" scoped>
/deep/.el-dialog__body {
  font-size: 14px !important;
}
.bg_tiao {
  width: 100%;
  background: #a9c6ea;
  height: 4px;
  top: 45px;
  position: relative;
  z-index: 2;
  font-size: 14px !important;
}
.liucheng {
  border-radius: 16px;
  height: 223px;
  -webkit-box-shadow: 5px 5px 10px #e3e3ea, -5px -5px 10px #ffffff;
  box-shadow: 5px 5px 10px #e3e3ea, -5px -5px 10px #ffffff;
  background: #fbfbfd;
  padding: 30px;
}
.redpoint {
  width: 31px;
  height: 31px;
  margin: 0 3px 6px 3px;
  border-radius: 50%;
  background: #e43030;
  box-shadow: 4px 4px 6px #bd0a0a;
  text-align: center;
}
.active_guang {
  color: #fff;
  font-size: 20px;
  line-height: 31px;
  border-radius: 50%;
}
.failed {
  width: 31px;
  height: 31px;
  margin: 0 3px 6px 3px;
  border-radius: 50%;
  background: #c2c6ca;
  -webkit-box-shadow: 4px 4px 6px #8a8a8a;
  box-shadow: 4px 4px 6px #8a8a8a;
  text-align: center;
}
.checkedfailed {
  color: #fff;
  font-size: 20px;
  line-height: 31px;
  text-align: center;
  background: #c2c6ca;
  border-radius: 50%;
}
</style>
